/*
 * @Author: dingyuwen ding_yuwen@163.com
 * @Date: 2023-02-08 18:03:18
 * @LastEditTime: 2023-08-31 16:26:44
 * @LastEditors: DingYuwen 43669762+DingYuwen@users.noreply.github.com
 * @Description:
 */
import { useBreakpointValue, VStack } from '@chakra-ui/react';

import i18n from '@tourfly/locales';
import type { ReactNode } from 'react';
import { useTranslation } from 'react-i18next';
import { FaLanguage } from 'react-icons/fa';

import { lStorage } from '../utils';

import IAIButton from '@/common/components/IAIButton';
import IAIIconButton from '@/common/components/IAIIconButton';
import IAIPopover from '@/common/components/IAIPopover';
type TriggerTypes = 'click' | 'hover' | undefined;
export default function LanguagePicker() {
  const { t } = useTranslation();

  const LANGUAGES = {
    en: t('common.langEnglish'),
    zh_CN: t('common.langSimplifiedChinese'),
  };

  const renderLanguagePicker = () => {
    const languagesToRender: ReactNode[] = [];
    Object.keys(LANGUAGES).forEach((lang) => {
      const isSelected = lStorage.get('lang') === lang;
      languagesToRender.push(
        <IAIButton
          key={lang}
          backgroundColor={isSelected ? 'base.900' : 'transparent'}
          onClick={() => {
            lStorage.set('lang', lang, null);
            i18n.changeLanguage(lang);
          }}
          aria-label={LANGUAGES[lang as keyof typeof LANGUAGES]}
          size="sm"
          minWidth="80px"
        >
          {LANGUAGES[lang as keyof typeof LANGUAGES]}
        </IAIButton>
      );
    });

    return languagesToRender;
  };

  const triggerType: TriggerTypes = useBreakpointValue({
    base: 'click',
    lg: 'hover',
  });

  return (
    <IAIPopover
      hasArrow={false}
      trigger={triggerType}
      bg="base.950"
      triggerComponent={
        <IAIIconButton
          aria-label={t('common.languagePickerLabel')}
          // tooltip={t('common.languagePickerLabel')}
          icon={<FaLanguage />}
          size="sm"
          variant="link"
          data-variant="link"
          fontSize={26}
          px={2}
          color="#666666"
          _hover={{
            color: '#333333',
          }}
          _dark={{
            color: 'base.200',
            _hover: {
              color: 'base.200',
            },
          }}
        />
      }
    >
      <VStack>{renderLanguagePicker()}</VStack>
    </IAIPopover>
  );
}
